import React, {PureComponent} from "react"
import {bindActionCreators} from "redux"
import {connect} from "react-redux"
import cs from  "classnames";
import { cloneDeep,find} from "lodash";
import PropTypes from "prop-types";
/*ant 组件*/
import {Timeline,Input,Button,Icon,Select,Row,Col,Form } from "antd"
import {sexTypes} from "../../const";
import {addPerson,delPerson,updatePerson} from "../actions";
/*css依赖*/
import "./organize.less"
const propTypes = {
    close: PropTypes.func.isRequired,
    info: PropTypes.object.isRequired,
    person:PropTypes.array.isRequired,
};
/*redux连接池*/
@connect(
    ({duty,base,role}) => ({
        duty:duty.duty,
        staff:base.staff,
        roleTypes:role.roleTypes,
    }),
    (dispatch) => (
        bindActionCreators({
            addPerson,
            delPerson,
            updatePerson,
        }, dispatch)
    )
)
class Index extends PureComponent {
    state = {
    }
    render() {
        let {close,info,duty,roleTypes} = this.props;
        let {person} = this.state;
        return (
            <div  className="organize-modal organize-addPerson organize-editPerson">
                <Form>
                <h4>
                    <span onClick={close}><Icon type="left" />返回</span>
                    <Button onClick={this.submit}>
                        完成编辑
                    </Button>
                </h4>
                <h5>{info.name} &emsp;<span></span> <span>正在编辑...</span></h5>
                <div className="organize-addPerson-list">
                    <Row>
                        <Col span="3">姓名</Col>
                        <Col span="3">性别</Col>
                        <Col span="4">警号(账户)</Col>
                        <Col span="3">密码</Col>
                        <Col span="4">职务</Col>
                        <Col span="4">角色</Col>
                        <Col span="3">操作</Col>
                    </Row>
                    {
                        this.showPerson()
                    }
                </div>
                </Form>
                <p className="organize-addPerson-desc">*仅admin和拥有账户管理权限的用户，才可对职务与角色进行操作</p>
            </div>
        )
    }
    componentDidMount() {
    }
    submit=(e)=>{
        let {person = [],updatePerson,info} = this.props;
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                let arr = cloneDeep(person);
                for(let x in arr){
                    arr[x].realName = values[`realName_${arr[x].id}`];
                    arr[x].duty = values[`duty_${arr[x].id}`];
                    arr[x].name = values[`name_${arr[x].id}`];
                    arr[x].pwd = values[`pwd_${arr[x].id}`];
                    arr[x].sex = values[`sex_${arr[x].id}`];
                    arr[x].role = values[`role_${arr[x].id}`];
                }
                updatePerson({
                    staffId:info.id,
                    person:arr
                })
                console.log('Received values of form: ', arr);
            }
        });
    }
    changePerson=(option)=>{
        let {person} = this.state;
        let newPerson = cloneDeep(person);
        this.setState({
            person:Object.assign(newPerson,option)
        })
    }
    showPerson=()=> {
        let {person = [],duty,roleTypes,delPerson,info} = this.props;
        const { getFieldDecorator, getFieldsError, getFieldError, isFieldTouched } = this.props.form;
        return person.map((i,index)=>{
            return (
                <Row key={i.name}>
                    <Col span="3">
                        <Form.Item
                        >
                            {getFieldDecorator(`realName_${i.id}`, {
                                rules: [{ required: true}],
                                initialValue:i.realName
                            })(
                                <Input/>
                            )}
                        </Form.Item>
                    </Col>
                    <Col span="3" className="sex">
                        {getFieldDecorator(`sex_${i.id}`, {
                            initialValue:i.sex
                        })(
                            <Select>
                                {
                                    sexTypes.map((z)=>{
                                        return (
                                            <Select.Option key={z.name} value={z.id+""}>{z.name}</Select.Option>
                                        )
                                    })
                                }
                            </Select>
                        )}
                    </Col>
                    <Col span="4">
                        <Form.Item
                        >
                            {getFieldDecorator(`name_${i.id}`, {
                                rules: [{ required: true}],
                                initialValue:i.name
                            })(
                                <Input/>
                            )}
                        </Form.Item>
                    </Col>
                    <Col span="3">
                        <Form.Item
                        >
                            {getFieldDecorator(`pwd_${i.id}`, {
                                rules: [{ required: true}],
                                initialValue:i.pwd
                            })(
                                <Input/>
                            )}
                        </Form.Item>
                    </Col>
                    <Col span="4">
                        {getFieldDecorator(`duty_${i.id}`, {
                            initialValue:i.duty
                        })(
                            <Select>
                                {
                                    duty.map((z)=>{
                                        return (
                                            <Select.Option key={z.name} value={z.id+""}>{z.name}</Select.Option>
                                        )
                                    })
                                }
                            </Select>
                        )}
                    </Col>
                    <Col span="4">
                        {getFieldDecorator(`role_${i.id}`, {
                            initialValue:i.role
                        })(
                            <Select>
                                {
                                    roleTypes.map((z)=>{
                                        return (
                                            <Select.Option key={z.name} value={z.id+""}>{z.name}</Select.Option>
                                        )
                                    })
                                }
                            </Select>
                        )}
                    </Col>
                    <Col span="3">
                        <Icon type="delete"  onClick={()=>{
                            delPerson({
                                ids:[i.id],
                                staffId:info.id
                            })
                        }}/>
                    </Col>
                </Row>
            )
        })
    }
}
export default Form.create()(Index);
